<!DOCTYPE html>
<html lang="en-US">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <title>30s code browser | 皮卡车</title>
    <meta name="description" content="皮卡车的文档, vuepress 文档">
    <meta name="generator" content="VuePress 1.3.1">
    <link rel="apple-touch-icon" href="/apple-touch-icon.png">
  <link rel="icon" href="/favicon.ico">
  <link rel="manifest" href="/manifest.json">
  <meta name="theme-color" content="#ffffff">
  <meta name="google-site-verification" content="Ld_AEWr30siza2LmmZ12csitRGsSj9gqqEAch0UXkTc">
    
    <link rel="preload" href="/assets/css/0.styles.1a6a4f51.css" as="style"><link rel="preload" href="/assets/js/app.1f0f93c9.js" as="script"><link rel="preload" href="/assets/js/2.f28f3227.js" as="script"><link rel="preload" href="/assets/js/63.c75dcb25.js" as="script"><link rel="preload" href="/assets/js/4.494c614b.js" as="script"><link rel="preload" href="/assets/js/3.a7eaa85f.js" as="script"><link rel="prefetch" href="/assets/js/10.7b76d38f.js"><link rel="prefetch" href="/assets/js/100.0d62a3f6.js"><link rel="prefetch" href="/assets/js/101.4916ac0c.js"><link rel="prefetch" href="/assets/js/102.0ee21f66.js"><link rel="prefetch" href="/assets/js/103.872c594c.js"><link rel="prefetch" href="/assets/js/104.0bff815e.js"><link rel="prefetch" href="/assets/js/105.46330c43.js"><link rel="prefetch" href="/assets/js/106.4ad211ca.js"><link rel="prefetch" href="/assets/js/107.d9011871.js"><link rel="prefetch" href="/assets/js/108.bab8ed0e.js"><link rel="prefetch" href="/assets/js/109.b7e4a790.js"><link rel="prefetch" href="/assets/js/11.518e0dbb.js"><link rel="prefetch" href="/assets/js/110.1eb492e8.js"><link rel="prefetch" href="/assets/js/111.ee6a2e31.js"><link rel="prefetch" href="/assets/js/112.05d655c6.js"><link rel="prefetch" href="/assets/js/113.0a4cf8f0.js"><link rel="prefetch" href="/assets/js/114.ef783947.js"><link rel="prefetch" href="/assets/js/115.11bbdb9c.js"><link rel="prefetch" href="/assets/js/116.5646126d.js"><link rel="prefetch" href="/assets/js/117.854d26bf.js"><link rel="prefetch" href="/assets/js/118.1e514b13.js"><link rel="prefetch" href="/assets/js/119.aa944f45.js"><link rel="prefetch" href="/assets/js/12.511e3547.js"><link rel="prefetch" href="/assets/js/120.1c6f450c.js"><link rel="prefetch" href="/assets/js/121.44f16ee6.js"><link rel="prefetch" href="/assets/js/122.f877b8e8.js"><link rel="prefetch" href="/assets/js/123.0563fdd5.js"><link rel="prefetch" href="/assets/js/124.4cd97316.js"><link rel="prefetch" href="/assets/js/125.a502f4ee.js"><link rel="prefetch" href="/assets/js/126.c7e94093.js"><link rel="prefetch" href="/assets/js/127.bd8aed7f.js"><link rel="prefetch" href="/assets/js/128.66063cc3.js"><link rel="prefetch" href="/assets/js/129.21bb1073.js"><link rel="prefetch" href="/assets/js/13.9e5bee4e.js"><link rel="prefetch" href="/assets/js/130.c8edfccb.js"><link rel="prefetch" href="/assets/js/131.7a1f29be.js"><link rel="prefetch" href="/assets/js/132.f589fc06.js"><link rel="prefetch" href="/assets/js/133.55ac5c9a.js"><link rel="prefetch" href="/assets/js/134.eeab127b.js"><link rel="prefetch" href="/assets/js/135.5a1571dd.js"><link rel="prefetch" href="/assets/js/136.b72b4d1c.js"><link rel="prefetch" href="/assets/js/137.678e022a.js"><link rel="prefetch" href="/assets/js/138.ba4108fa.js"><link rel="prefetch" href="/assets/js/139.0b02b599.js"><link rel="prefetch" href="/assets/js/14.b9ec07e6.js"><link rel="prefetch" href="/assets/js/140.690e4e4c.js"><link rel="prefetch" href="/assets/js/141.709da4ed.js"><link rel="prefetch" href="/assets/js/142.f2de76c0.js"><link rel="prefetch" href="/assets/js/143.4dcb17f0.js"><link rel="prefetch" href="/assets/js/144.730ef429.js"><link rel="prefetch" href="/assets/js/145.d881c754.js"><link rel="prefetch" href="/assets/js/146.f3379a41.js"><link rel="prefetch" href="/assets/js/147.eeb9ca6f.js"><link rel="prefetch" href="/assets/js/148.bb6020cd.js"><link rel="prefetch" href="/assets/js/149.1d34dea6.js"><link rel="prefetch" href="/assets/js/15.d0fa1a9d.js"><link rel="prefetch" href="/assets/js/150.599238ba.js"><link rel="prefetch" href="/assets/js/151.9655268f.js"><link rel="prefetch" href="/assets/js/152.1f843fa4.js"><link rel="prefetch" href="/assets/js/153.7af45ca6.js"><link rel="prefetch" href="/assets/js/154.eff93a56.js"><link rel="prefetch" href="/assets/js/155.ff07fba4.js"><link rel="prefetch" href="/assets/js/156.1b1814b7.js"><link rel="prefetch" href="/assets/js/157.8ac4c21b.js"><link rel="prefetch" href="/assets/js/158.aa8a0124.js"><link rel="prefetch" href="/assets/js/159.d61fdb37.js"><link rel="prefetch" href="/assets/js/16.ccd2bd60.js"><link rel="prefetch" href="/assets/js/17.ddc8fde4.js"><link rel="prefetch" href="/assets/js/18.a06e60cc.js"><link rel="prefetch" href="/assets/js/19.64b3dec9.js"><link rel="prefetch" href="/assets/js/20.3615e182.js"><link rel="prefetch" href="/assets/js/21.0c654d53.js"><link rel="prefetch" href="/assets/js/22.720aac8f.js"><link rel="prefetch" href="/assets/js/23.0dc53b91.js"><link rel="prefetch" href="/assets/js/24.d4b75b0e.js"><link rel="prefetch" href="/assets/js/25.9120702e.js"><link rel="prefetch" href="/assets/js/26.b24d89e2.js"><link rel="prefetch" href="/assets/js/27.55df94ab.js"><link rel="prefetch" href="/assets/js/28.250c68a5.js"><link rel="prefetch" href="/assets/js/29.75a3c8f3.js"><link rel="prefetch" href="/assets/js/30.8cdc2fcd.js"><link rel="prefetch" href="/assets/js/31.45303d68.js"><link rel="prefetch" href="/assets/js/32.f4225739.js"><link rel="prefetch" href="/assets/js/33.15b21267.js"><link rel="prefetch" href="/assets/js/34.5baca30b.js"><link rel="prefetch" href="/assets/js/35.5d9dfab1.js"><link rel="prefetch" href="/assets/js/36.981eadca.js"><link rel="prefetch" href="/assets/js/37.cead7f6b.js"><link rel="prefetch" href="/assets/js/38.ee6bcaf1.js"><link rel="prefetch" href="/assets/js/39.e7579788.js"><link rel="prefetch" href="/assets/js/40.01d2b30b.js"><link rel="prefetch" href="/assets/js/41.19cf06ce.js"><link rel="prefetch" href="/assets/js/42.15941cde.js"><link rel="prefetch" href="/assets/js/43.66adb73c.js"><link rel="prefetch" href="/assets/js/44.8d99ed62.js"><link rel="prefetch" href="/assets/js/45.12ea9159.js"><link rel="prefetch" href="/assets/js/46.644efa88.js"><link rel="prefetch" href="/assets/js/47.531131c7.js"><link rel="prefetch" href="/assets/js/48.b214f000.js"><link rel="prefetch" href="/assets/js/49.e42d4b72.js"><link rel="prefetch" href="/assets/js/5.7e277dc8.js"><link rel="prefetch" href="/assets/js/50.de0aa85c.js"><link rel="prefetch" href="/assets/js/51.8be2974c.js"><link rel="prefetch" href="/assets/js/52.cc067888.js"><link rel="prefetch" href="/assets/js/53.4ceb2c6b.js"><link rel="prefetch" href="/assets/js/54.b2647058.js"><link rel="prefetch" href="/assets/js/55.dc3df953.js"><link rel="prefetch" href="/assets/js/56.921a6934.js"><link rel="prefetch" href="/assets/js/57.1e24b1fd.js"><link rel="prefetch" href="/assets/js/58.f4e8ebac.js"><link rel="prefetch" href="/assets/js/59.17ab117b.js"><link rel="prefetch" href="/assets/js/6.4014218f.js"><link rel="prefetch" href="/assets/js/60.352cea9b.js"><link rel="prefetch" href="/assets/js/61.77289388.js"><link rel="prefetch" href="/assets/js/62.ec0ed919.js"><link rel="prefetch" href="/assets/js/64.59d15a75.js"><link rel="prefetch" href="/assets/js/65.7e5a14bb.js"><link rel="prefetch" href="/assets/js/66.4e770ba1.js"><link rel="prefetch" href="/assets/js/67.0742f21a.js"><link rel="prefetch" href="/assets/js/68.a6ed34fd.js"><link rel="prefetch" href="/assets/js/69.48c9a47f.js"><link rel="prefetch" href="/assets/js/7.c5ecd7d3.js"><link rel="prefetch" href="/assets/js/70.eb477192.js"><link rel="prefetch" href="/assets/js/71.1be57009.js"><link rel="prefetch" href="/assets/js/72.6859561c.js"><link rel="prefetch" href="/assets/js/73.aae65018.js"><link rel="prefetch" href="/assets/js/74.59d76d34.js"><link rel="prefetch" href="/assets/js/75.04e23427.js"><link rel="prefetch" href="/assets/js/76.74d6eb6a.js"><link rel="prefetch" href="/assets/js/77.fba76057.js"><link rel="prefetch" href="/assets/js/78.0da94b25.js"><link rel="prefetch" href="/assets/js/79.14676976.js"><link rel="prefetch" href="/assets/js/8.08c85334.js"><link rel="prefetch" href="/assets/js/80.7494721f.js"><link rel="prefetch" href="/assets/js/81.f04f6229.js"><link rel="prefetch" href="/assets/js/82.e4c6f74b.js"><link rel="prefetch" href="/assets/js/83.81ad8dbf.js"><link rel="prefetch" href="/assets/js/84.d28e4a3d.js"><link rel="prefetch" href="/assets/js/85.d99fa7fa.js"><link rel="prefetch" href="/assets/js/86.597ecadb.js"><link rel="prefetch" href="/assets/js/87.e6d21734.js"><link rel="prefetch" href="/assets/js/88.b43a52d4.js"><link rel="prefetch" href="/assets/js/89.a5ba287d.js"><link rel="prefetch" href="/assets/js/9.658cd6b3.js"><link rel="prefetch" href="/assets/js/90.c253df12.js"><link rel="prefetch" href="/assets/js/91.8946a93d.js"><link rel="prefetch" href="/assets/js/92.8b8f1ae0.js"><link rel="prefetch" href="/assets/js/93.aa73c784.js"><link rel="prefetch" href="/assets/js/94.9326bcc7.js"><link rel="prefetch" href="/assets/js/95.46b64b79.js"><link rel="prefetch" href="/assets/js/96.61a9b0b9.js"><link rel="prefetch" href="/assets/js/97.65a03aad.js"><link rel="prefetch" href="/assets/js/98.7aa56ed0.js"><link rel="prefetch" href="/assets/js/99.a652c8d5.js">
    <link rel="stylesheet" href="/assets/css/0.styles.1a6a4f51.css">
  </head>
  <body>
    <div id="app" data-server-rendered="true"><div class="theme-container"><header class="navbar"><div class="sidebar-button"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" viewBox="0 0 448 512" class="icon"><path fill="currentColor" d="M436 124H12c-6.627 0-12-5.373-12-12V80c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12z"></path></svg></div> <a href="/" class="home-link router-link-active"><!----> <span class="site-name">皮卡车</span></a> <div class="links"><div class="search-box"><input aria-label="Search" autocomplete="off" spellcheck="false" value=""> <!----></div> <nav class="nav-links can-hide"><div class="nav-item"><a href="/" class="nav-link">
  Home
</a></div><div class="nav-item"><a href="/guide/" class="nav-link">
  Guide
</a></div><div class="nav-item"><a href="/computer/" class="nav-link">
  计算机
</a></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="系统" class="dropdown-title"><span class="title">系统</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="/os/linux/" class="nav-link">
  Linux
</a></li><li class="dropdown-item"><!----> <a href="/os/manjaro/" class="nav-link">
  Manjaro
</a></li><li class="dropdown-item"><!----> <a href="/os/ubuntu/" class="nav-link">
  Ubuntu
</a></li><li class="dropdown-item"><!----> <a href="/os/centos/" class="nav-link">
  CentOS
</a></li></ul></div></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="前端" class="dropdown-title"><span class="title">前端</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="/frontend/javascript/" class="nav-link">
  JavaScript
</a></li><li class="dropdown-item"><!----> <a href="https://css.shanyuhai.top/" target="_blank" rel="noopener noreferrer" class="nav-link external">
  CSS
  <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li class="dropdown-item"><!----> <a href="/frontend/webpack/" class="nav-link">
  Webpack
</a></li><li class="dropdown-item"><!----> <a href="/frontend/d3js/" class="nav-link">
  D3
</a></li><li class="dropdown-item"><!----> <a href="/frontend/utils/" class="nav-link router-link-active">
  Utils
</a></li></ul></div></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="后端" class="dropdown-title"><span class="title">后端</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="/backend/nodejs/" class="nav-link">
  Nodejs
</a></li><li class="dropdown-item"><!----> <a href="/backend/koa/" class="nav-link">
  Koa
</a></li><li class="dropdown-item"><!----> <a href="/backend/mongodb/" class="nav-link">
  MongoDB
</a></li><li class="dropdown-item"><!----> <a href="/backend/nginx/" class="nav-link">
  Nginx
</a></li></ul></div></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="开发工具" class="dropdown-title"><span class="title">开发工具</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="/tools/git/" class="nav-link">
  Git
</a></li><li class="dropdown-item"><!----> <a href="/tools/github/" class="nav-link">
  Github
</a></li><li class="dropdown-item"><!----> <a href="/tools/vscode/" class="nav-link">
  VSCode
</a></li><li class="dropdown-item"><!----> <a href="/tools/chrome/" class="nav-link">
  Chrome Developer tools
</a></li><li class="dropdown-item"><!----> <a href="/tools/bookmark-scripts/" class="nav-link">
  Bookmark scripts
</a></li></ul></div></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="更多" class="dropdown-title"><span class="title">更多</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="/more/algorithm/" class="nav-link">
  算法
</a></li><li class="dropdown-item"><!----> <a href="/more/interview/" class="nav-link">
  面试题
</a></li><li class="dropdown-item"><!----> <a href="/more/hodgepodge/" class="nav-link">
  大杂烩
</a></li><li class="dropdown-item"><!----> <a href="/more/clean/" class="nav-link">
  风格指南
</a></li><li class="dropdown-item"><!----> <a href="https://v1.vuepress.vuejs.org/zh/" target="_blank" rel="noopener noreferrer" class="nav-link external">
  VuePress1.x 官网
  <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li></ul></div></div> <!----></nav></div></header> <div class="sidebar-mask"></div> <aside class="sidebar"><nav class="nav-links"><div class="nav-item"><a href="/" class="nav-link">
  Home
</a></div><div class="nav-item"><a href="/guide/" class="nav-link">
  Guide
</a></div><div class="nav-item"><a href="/computer/" class="nav-link">
  计算机
</a></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="系统" class="dropdown-title"><span class="title">系统</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="/os/linux/" class="nav-link">
  Linux
</a></li><li class="dropdown-item"><!----> <a href="/os/manjaro/" class="nav-link">
  Manjaro
</a></li><li class="dropdown-item"><!----> <a href="/os/ubuntu/" class="nav-link">
  Ubuntu
</a></li><li class="dropdown-item"><!----> <a href="/os/centos/" class="nav-link">
  CentOS
</a></li></ul></div></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="前端" class="dropdown-title"><span class="title">前端</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="/frontend/javascript/" class="nav-link">
  JavaScript
</a></li><li class="dropdown-item"><!----> <a href="https://css.shanyuhai.top/" target="_blank" rel="noopener noreferrer" class="nav-link external">
  CSS
  <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li class="dropdown-item"><!----> <a href="/frontend/webpack/" class="nav-link">
  Webpack
</a></li><li class="dropdown-item"><!----> <a href="/frontend/d3js/" class="nav-link">
  D3
</a></li><li class="dropdown-item"><!----> <a href="/frontend/utils/" class="nav-link router-link-active">
  Utils
</a></li></ul></div></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="后端" class="dropdown-title"><span class="title">后端</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="/backend/nodejs/" class="nav-link">
  Nodejs
</a></li><li class="dropdown-item"><!----> <a href="/backend/koa/" class="nav-link">
  Koa
</a></li><li class="dropdown-item"><!----> <a href="/backend/mongodb/" class="nav-link">
  MongoDB
</a></li><li class="dropdown-item"><!----> <a href="/backend/nginx/" class="nav-link">
  Nginx
</a></li></ul></div></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="开发工具" class="dropdown-title"><span class="title">开发工具</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="/tools/git/" class="nav-link">
  Git
</a></li><li class="dropdown-item"><!----> <a href="/tools/github/" class="nav-link">
  Github
</a></li><li class="dropdown-item"><!----> <a href="/tools/vscode/" class="nav-link">
  VSCode
</a></li><li class="dropdown-item"><!----> <a href="/tools/chrome/" class="nav-link">
  Chrome Developer tools
</a></li><li class="dropdown-item"><!----> <a href="/tools/bookmark-scripts/" class="nav-link">
  Bookmark scripts
</a></li></ul></div></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="更多" class="dropdown-title"><span class="title">更多</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="/more/algorithm/" class="nav-link">
  算法
</a></li><li class="dropdown-item"><!----> <a href="/more/interview/" class="nav-link">
  面试题
</a></li><li class="dropdown-item"><!----> <a href="/more/hodgepodge/" class="nav-link">
  大杂烩
</a></li><li class="dropdown-item"><!----> <a href="/more/clean/" class="nav-link">
  风格指南
</a></li><li class="dropdown-item"><!----> <a href="https://v1.vuepress.vuejs.org/zh/" target="_blank" rel="noopener noreferrer" class="nav-link external">
  VuePress1.x 官网
  <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li></ul></div></div> <!----></nav>  <ul class="sidebar-links"><li><section class="sidebar-group depth-0"><p class="sidebar-heading open"><span>UTILS</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/frontend/utils/" class="sidebar-link">首页</a></li><li><a href="/frontend/utils/code-adapter.html" class="sidebar-link">30s code adapter</a></li><li><a href="/frontend/utils/code-archived.html" class="sidebar-link">30s code archived</a></li><li><a href="/frontend/utils/code-array.html" class="sidebar-link">30s code array</a></li><li><a href="/frontend/utils/code-browser.html" class="active sidebar-link">30s code browser</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/frontend/utils/code-browser.html#arraytohtmllist" class="sidebar-link">arrayToHtmlList</a></li><li class="sidebar-sub-header"><a href="/frontend/utils/code-browser.html#bottomvisible" class="sidebar-link">bottomVisible</a></li><li class="sidebar-sub-header"><a href="/frontend/utils/code-browser.html#copytoclipboard" class="sidebar-link">copyToClipboard</a></li><li class="sidebar-sub-header"><a href="/frontend/utils/code-browser.html#counter" class="sidebar-link">counter</a></li><li class="sidebar-sub-header"><a href="/frontend/utils/code-browser.html#createelement" class="sidebar-link">createElement</a></li><li class="sidebar-sub-header"><a href="/frontend/utils/code-browser.html#createeventhub" class="sidebar-link">createEventHub</a></li><li class="sidebar-sub-header"><a href="/frontend/utils/code-browser.html#currenturl" class="sidebar-link">currentURL</a></li><li class="sidebar-sub-header"><a href="/frontend/utils/code-browser.html#detectdevicetype" class="sidebar-link">detectDeviceType</a></li><li class="sidebar-sub-header"><a href="/frontend/utils/code-browser.html#elementcontains" class="sidebar-link">elementContains</a></li><li class="sidebar-sub-header"><a href="/frontend/utils/code-browser.html#elementisvisibleinviewport" class="sidebar-link">elementIsVisibleInViewport</a></li><li class="sidebar-sub-header"><a href="/frontend/utils/code-browser.html#formtoobject" class="sidebar-link">formToObject</a></li><li class="sidebar-sub-header"><a href="/frontend/utils/code-browser.html#getimages" class="sidebar-link">getImages</a></li><li class="sidebar-sub-header"><a href="/frontend/utils/code-browser.html#getscrollposition" class="sidebar-link">getScrollPosition</a></li><li class="sidebar-sub-header"><a href="/frontend/utils/code-browser.html#getstyle-setstyle" class="sidebar-link">getStyle/setStyle</a></li><li class="sidebar-sub-header"><a href="/frontend/utils/code-browser.html#hasclass-toggleclass" class="sidebar-link">hasClass/toggleClass</a></li><li class="sidebar-sub-header"><a href="/frontend/utils/code-browser.html#hide-show" class="sidebar-link">hide/show</a></li><li class="sidebar-sub-header"><a href="/frontend/utils/code-browser.html#httpsredirect" class="sidebar-link">httpsRedirect</a></li><li class="sidebar-sub-header"><a href="/frontend/utils/code-browser.html#insertafter-insertbefore" class="sidebar-link">insertAfter/insertBefore</a></li><li class="sidebar-sub-header"><a href="/frontend/utils/code-browser.html#isbrowsertabfocused" class="sidebar-link">isBrowserTabFocused</a></li><li class="sidebar-sub-header"><a href="/frontend/utils/code-browser.html#nodelisttoarray" class="sidebar-link">nodeListToArray</a></li><li class="sidebar-sub-header"><a href="/frontend/utils/code-browser.html#observemutations" class="sidebar-link">observeMutations</a></li><li class="sidebar-sub-header"><a href="/frontend/utils/code-browser.html#off-on" class="sidebar-link">off/on</a></li><li class="sidebar-sub-header"><a href="/frontend/utils/code-browser.html#onuserinputchange" class="sidebar-link">onUserInputChange</a></li><li class="sidebar-sub-header"><a href="/frontend/utils/code-browser.html#prefix" class="sidebar-link">prefix</a></li><li class="sidebar-sub-header"><a href="/frontend/utils/code-browser.html#recordanimationframes" class="sidebar-link">recordAnimationFrames</a></li><li class="sidebar-sub-header"><a href="/frontend/utils/code-browser.html#redirect" class="sidebar-link">redirect</a></li><li class="sidebar-sub-header"><a href="/frontend/utils/code-browser.html#runasync" class="sidebar-link">runAsync</a></li><li class="sidebar-sub-header"><a href="/frontend/utils/code-browser.html#scrolltotop" class="sidebar-link">scrollToTop</a></li><li class="sidebar-sub-header"><a href="/frontend/utils/code-browser.html#smoothscroll" class="sidebar-link">smoothScroll</a></li><li class="sidebar-sub-header"><a href="/frontend/utils/code-browser.html#serializeform" class="sidebar-link">serializeForm</a></li><li class="sidebar-sub-header"><a href="/frontend/utils/code-browser.html#triggerevent" class="sidebar-link">triggerEvent</a></li></ul></li><li><a href="/frontend/utils/code-date.html" class="sidebar-link">30s code date</a></li><li><a href="/frontend/utils/code-function.html" class="sidebar-link">30s code function</a></li><li><a href="/frontend/utils/code-math.html" class="sidebar-link">30s code math</a></li><li><a href="/frontend/utils/code-node.html" class="sidebar-link">30s code node</a></li><li><a href="/frontend/utils/code-object.html" class="sidebar-link">30s code object</a></li><li><a href="/frontend/utils/code-string.html" class="sidebar-link">30s code string</a></li><li><a href="/frontend/utils/code-type.html" class="sidebar-link">30s code type</a></li><li><a href="/frontend/utils/code-utility.html" class="sidebar-link">30s code utility</a></li></ul></section></li></ul> </aside> <main class="page"> <div class="theme-default-content content__default"><blockquote><p><a href="https://www.30secondsofcode.org/tag/browser" target="_blank" rel="noopener noreferrer">30 seconds of code (Browser)<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></p></blockquote> <h2 id="arraytohtmllist"><a href="#arraytohtmllist" class="header-anchor">#</a> arrayToHtmlList</h2> <p><strong>FUNCTION：</strong></p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">const</span> <span class="token function-variable function">arrayToHtmlList</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token parameter">arr<span class="token punctuation">,</span> listID</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span>
  <span class="token punctuation">(</span><span class="token parameter">el</span> <span class="token operator">=&gt;</span> <span class="token punctuation">(</span>
    <span class="token punctuation">(</span>el <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">querySelector</span><span class="token punctuation">(</span><span class="token string">'#'</span> <span class="token operator">+</span> listID<span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
    <span class="token punctuation">(</span>el<span class="token punctuation">.</span>innerHTML <span class="token operator">+=</span> arr<span class="token punctuation">.</span><span class="token function">map</span><span class="token punctuation">(</span><span class="token parameter">item</span> <span class="token operator">=&gt;</span> <span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string">&lt;li&gt;</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>item<span class="token interpolation-punctuation punctuation">}</span></span><span class="token string">&lt;/li&gt;</span><span class="token template-punctuation string">`</span></span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">join</span><span class="token punctuation">(</span><span class="token string">''</span><span class="token punctuation">)</span><span class="token punctuation">)</span>
  <span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre></div><p><strong>CONCEPTS：</strong></p> <p>指定 ID 拼接 li。</p> <p><strong>EXAMPLES：</strong></p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token function">arrayToHtmlList</span><span class="token punctuation">(</span><span class="token punctuation">[</span><span class="token string">'item 1'</span><span class="token punctuation">,</span> <span class="token string">'item 2'</span><span class="token punctuation">]</span><span class="token punctuation">,</span> <span class="token string">'myListID'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre></div><h2 id="bottomvisible"><a href="#bottomvisible" class="header-anchor">#</a> bottomVisible</h2> <p><strong>FUNCTION：</strong></p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">const</span> <span class="token function-variable function">bottomVisible</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span>
  document<span class="token punctuation">.</span>documentElement<span class="token punctuation">.</span>clientHeight <span class="token operator">+</span> window<span class="token punctuation">.</span>scrollY <span class="token operator">&gt;=</span>
  <span class="token punctuation">(</span>document<span class="token punctuation">.</span>documentElement<span class="token punctuation">.</span>scrollHeight <span class="token operator">||</span> document<span class="token punctuation">.</span>documentElement<span class="token punctuation">.</span>clientHeight<span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre></div><p><strong>CONCEPTS：</strong></p> <p>判断底部是否可见（到底了）。计算浏览器的高度来判断。</p> <p><strong>EXAMPLES：</strong></p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token function">bottomVisible</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// true</span>
</code></pre></div><h2 id="copytoclipboard"><a href="#copytoclipboard" class="header-anchor">#</a> copyToClipboard</h2> <p><strong>FUNCTION：</strong></p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">const</span> <span class="token function-variable function">copyToClipboard</span> <span class="token operator">=</span> <span class="token parameter">str</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
  <span class="token keyword">const</span> el <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">createElement</span><span class="token punctuation">(</span><span class="token string">'textarea'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
  el<span class="token punctuation">.</span>value <span class="token operator">=</span> str<span class="token punctuation">;</span>
  el<span class="token punctuation">.</span><span class="token function">setAttribute</span><span class="token punctuation">(</span><span class="token string">'readonly'</span><span class="token punctuation">,</span> <span class="token string">''</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
  el<span class="token punctuation">.</span>style<span class="token punctuation">.</span>position <span class="token operator">=</span> <span class="token string">'absolute'</span><span class="token punctuation">;</span>
  el<span class="token punctuation">.</span>style<span class="token punctuation">.</span>left <span class="token operator">=</span> <span class="token string">'-9999px'</span><span class="token punctuation">;</span>
  document<span class="token punctuation">.</span>body<span class="token punctuation">.</span><span class="token function">appendChild</span><span class="token punctuation">(</span>el<span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token keyword">const</span> selected <span class="token operator">=</span>
    document<span class="token punctuation">.</span><span class="token function">getSelection</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">.</span>rangeCount <span class="token operator">&gt;</span> <span class="token number">0</span> <span class="token operator">?</span> document<span class="token punctuation">.</span><span class="token function">getSelection</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">getRangeAt</span><span class="token punctuation">(</span><span class="token number">0</span><span class="token punctuation">)</span> <span class="token operator">:</span> <span class="token boolean">false</span><span class="token punctuation">;</span>
  el<span class="token punctuation">.</span><span class="token function">select</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
  document<span class="token punctuation">.</span><span class="token function">execCommand</span><span class="token punctuation">(</span><span class="token string">'copy'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
  document<span class="token punctuation">.</span>body<span class="token punctuation">.</span><span class="token function">removeChild</span><span class="token punctuation">(</span>el<span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token keyword">if</span> <span class="token punctuation">(</span>selected<span class="token punctuation">)</span> <span class="token punctuation">{</span>
    document<span class="token punctuation">.</span><span class="token function">getSelection</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">removeAllRanges</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    document<span class="token punctuation">.</span><span class="token function">getSelection</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">addRange</span><span class="token punctuation">(</span>selected<span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token punctuation">}</span>
<span class="token punctuation">}</span><span class="token punctuation">;</span>
<span class="token comment">//  navigator.clipboard</span>
</code></pre></div><p><strong>CONCEPTS：</strong></p> <p>复制内容到剪切板。一般情况使用第三方提供的稳定、兼容。</p> <p><strong>EXAMPLES：</strong></p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token function">copyToClipboard</span><span class="token punctuation">(</span><span class="token string">'Lorem ipsum'</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// 'Lorem ipsum' copied to clipboard.</span>
</code></pre></div><h2 id="counter"><a href="#counter" class="header-anchor">#</a> counter</h2> <p><strong>FUNCTION：</strong></p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">const</span> <span class="token function-variable function">counter</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token parameter">selector<span class="token punctuation">,</span> start<span class="token punctuation">,</span> end<span class="token punctuation">,</span> step <span class="token operator">=</span> <span class="token number">1</span><span class="token punctuation">,</span> duration <span class="token operator">=</span> <span class="token number">2000</span></span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
  <span class="token keyword">let</span> current <span class="token operator">=</span> start<span class="token punctuation">,</span>
    _step <span class="token operator">=</span> <span class="token punctuation">(</span>end <span class="token operator">-</span> start<span class="token punctuation">)</span> <span class="token operator">*</span> step <span class="token operator">&lt;</span> <span class="token number">0</span> <span class="token operator">?</span> <span class="token operator">-</span>step <span class="token operator">:</span> step<span class="token punctuation">,</span>
    timer <span class="token operator">=</span> <span class="token function">setInterval</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
      current <span class="token operator">+=</span> _step<span class="token punctuation">;</span>
      document<span class="token punctuation">.</span><span class="token function">querySelector</span><span class="token punctuation">(</span>selector<span class="token punctuation">)</span><span class="token punctuation">.</span>innerHTML <span class="token operator">=</span> current<span class="token punctuation">;</span>
      <span class="token keyword">if</span> <span class="token punctuation">(</span>current <span class="token operator">&gt;=</span> end<span class="token punctuation">)</span> document<span class="token punctuation">.</span><span class="token function">querySelector</span><span class="token punctuation">(</span>selector<span class="token punctuation">)</span><span class="token punctuation">.</span>innerHTML <span class="token operator">=</span> end<span class="token punctuation">;</span>
      <span class="token keyword">if</span> <span class="token punctuation">(</span>current <span class="token operator">&gt;=</span> end<span class="token punctuation">)</span> <span class="token function">clearInterval</span><span class="token punctuation">(</span>timer<span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token punctuation">}</span><span class="token punctuation">,</span> Math<span class="token punctuation">.</span><span class="token function">abs</span><span class="token punctuation">(</span>Math<span class="token punctuation">.</span><span class="token function">floor</span><span class="token punctuation">(</span>duration <span class="token operator">/</span> <span class="token punctuation">(</span>end <span class="token operator">-</span> start<span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token keyword">return</span> timer<span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">;</span>
</code></pre></div><p><strong>CONCEPTS：</strong></p> <p>指定一个计数 counter。</p> <p><strong>EXAMPLES：</strong></p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token function">counter</span><span class="token punctuation">(</span><span class="token string">'#my-id'</span><span class="token punctuation">,</span> <span class="token number">1</span><span class="token punctuation">,</span> <span class="token number">1000</span><span class="token punctuation">,</span> <span class="token number">5</span><span class="token punctuation">,</span> <span class="token number">2000</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// Creates a 2-second timer for the element with id=&quot;my-id&quot;</span>
</code></pre></div><h2 id="createelement"><a href="#createelement" class="header-anchor">#</a> createElement</h2> <p><strong>FUNCTION：</strong></p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">const</span> <span class="token function-variable function">createElement</span> <span class="token operator">=</span> <span class="token parameter">str</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
  <span class="token keyword">const</span> el <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">createElement</span><span class="token punctuation">(</span><span class="token string">'div'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
  el<span class="token punctuation">.</span>innerHTML <span class="token operator">=</span> str<span class="token punctuation">;</span>
  <span class="token keyword">return</span> el<span class="token punctuation">.</span>firstElementChild<span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">;</span>
</code></pre></div><p><strong>CONCEPTS：</strong></p> <p>创建一个 DOM，超过一个则仅返回第一个。</p> <p><strong>EXAMPLES：</strong></p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">const</span> el <span class="token operator">=</span> <span class="token function">createElement</span><span class="token punctuation">(</span>
  <span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string">&lt;div class=&quot;container&quot;&gt;
    &lt;p&gt;Hello!&lt;/p&gt;
  &lt;/div&gt;</span><span class="token template-punctuation string">`</span></span>
<span class="token punctuation">)</span><span class="token punctuation">;</span>
el<span class="token punctuation">.</span>className<span class="token punctuation">;</span> <span class="token comment">// 'container'</span>
</code></pre></div><h2 id="createeventhub"><a href="#createeventhub" class="header-anchor">#</a> createEventHub <span class="badge error" style="vertical-align:top;" data-v-15b7b770>important</span></h2> <p><strong>FUNCTION：</strong></p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">const</span> <span class="token function-variable function">createEventHub</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">(</span><span class="token punctuation">{</span>
  hub<span class="token operator">:</span> Object<span class="token punctuation">.</span><span class="token function">create</span><span class="token punctuation">(</span><span class="token keyword">null</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
  <span class="token function">emit</span><span class="token punctuation">(</span><span class="token parameter">event<span class="token punctuation">,</span> data</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">.</span>hub<span class="token punctuation">[</span>event<span class="token punctuation">]</span> <span class="token operator">||</span> <span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">forEach</span><span class="token punctuation">(</span><span class="token parameter">handler</span> <span class="token operator">=&gt;</span> <span class="token function">handler</span><span class="token punctuation">(</span>data<span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token punctuation">}</span><span class="token punctuation">,</span>
  <span class="token function">on</span><span class="token punctuation">(</span><span class="token parameter">event<span class="token punctuation">,</span> handler</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">if</span> <span class="token punctuation">(</span><span class="token operator">!</span><span class="token keyword">this</span><span class="token punctuation">.</span>hub<span class="token punctuation">[</span>event<span class="token punctuation">]</span><span class="token punctuation">)</span> <span class="token keyword">this</span><span class="token punctuation">.</span>hub<span class="token punctuation">[</span>event<span class="token punctuation">]</span> <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">;</span>
    <span class="token keyword">this</span><span class="token punctuation">.</span>hub<span class="token punctuation">[</span>event<span class="token punctuation">]</span><span class="token punctuation">.</span><span class="token function">push</span><span class="token punctuation">(</span>handler<span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token punctuation">}</span><span class="token punctuation">,</span>
  <span class="token function">off</span><span class="token punctuation">(</span><span class="token parameter">event<span class="token punctuation">,</span> handler</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">const</span> i <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">.</span>hub<span class="token punctuation">[</span>event<span class="token punctuation">]</span> <span class="token operator">||</span> <span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">findIndex</span><span class="token punctuation">(</span><span class="token parameter">h</span> <span class="token operator">=&gt;</span> h <span class="token operator">===</span> handler<span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token keyword">if</span> <span class="token punctuation">(</span>i <span class="token operator">&gt;</span> <span class="token operator">-</span><span class="token number">1</span><span class="token punctuation">)</span> <span class="token keyword">this</span><span class="token punctuation">.</span>hub<span class="token punctuation">[</span>event<span class="token punctuation">]</span><span class="token punctuation">.</span><span class="token function">splice</span><span class="token punctuation">(</span>i<span class="token punctuation">,</span> <span class="token number">1</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token keyword">if</span> <span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">.</span>hub<span class="token punctuation">[</span>event<span class="token punctuation">]</span><span class="token punctuation">.</span>length <span class="token operator">===</span> <span class="token number">0</span><span class="token punctuation">)</span> <span class="token keyword">delete</span> <span class="token keyword">this</span><span class="token punctuation">.</span>hub<span class="token punctuation">[</span>event<span class="token punctuation">]</span><span class="token punctuation">;</span>
  <span class="token punctuation">}</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre></div><p><strong>CONCEPTS：</strong></p> <p>创建一个事件发布、订阅中心。发布主要靠循环判断。</p> <p><strong>EXAMPLES：</strong></p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">const</span> <span class="token function-variable function">handler</span> <span class="token operator">=</span> <span class="token parameter">data</span> <span class="token operator">=&gt;</span> console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>data<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token keyword">const</span> hub <span class="token operator">=</span> <span class="token function">createEventHub</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token keyword">let</span> increment <span class="token operator">=</span> <span class="token number">0</span><span class="token punctuation">;</span>

<span class="token comment">// Subscribe: listen for different types of events</span>
hub<span class="token punctuation">.</span><span class="token function">on</span><span class="token punctuation">(</span><span class="token string">'message'</span><span class="token punctuation">,</span> handler<span class="token punctuation">)</span><span class="token punctuation">;</span>
hub<span class="token punctuation">.</span><span class="token function">on</span><span class="token punctuation">(</span><span class="token string">'message'</span><span class="token punctuation">,</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">'Message event fired'</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
hub<span class="token punctuation">.</span><span class="token function">on</span><span class="token punctuation">(</span><span class="token string">'increment'</span><span class="token punctuation">,</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> increment<span class="token operator">++</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

<span class="token comment">// Publish: emit events to invoke all handlers subscribed to them, passing the data to them as an argument</span>
hub<span class="token punctuation">.</span><span class="token function">emit</span><span class="token punctuation">(</span><span class="token string">'message'</span><span class="token punctuation">,</span> <span class="token string">'hello world'</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// logs 'hello world' and 'Message event fired'</span>
hub<span class="token punctuation">.</span><span class="token function">emit</span><span class="token punctuation">(</span><span class="token string">'message'</span><span class="token punctuation">,</span> <span class="token punctuation">{</span> hello<span class="token operator">:</span> <span class="token string">'world'</span> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// logs the object and 'Message event fired'</span>
hub<span class="token punctuation">.</span><span class="token function">emit</span><span class="token punctuation">(</span><span class="token string">'increment'</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// `increment` variable is now 1</span>

<span class="token comment">// Unsubscribe: stop a specific handler from listening to the 'message' event</span>
hub<span class="token punctuation">.</span><span class="token function">off</span><span class="token punctuation">(</span><span class="token string">'message'</span><span class="token punctuation">,</span> handler<span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre></div><h2 id="currenturl"><a href="#currenturl" class="header-anchor">#</a> currentURL</h2> <p><strong>FUNCTION：</strong></p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">const</span> <span class="token function-variable function">currentURL</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> window<span class="token punctuation">.</span>location<span class="token punctuation">.</span>href<span class="token punctuation">;</span>
</code></pre></div><p><strong>CONCEPTS：</strong></p> <p>当前 URL。</p> <p><strong>EXAMPLES：</strong></p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token function">currentURL</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// &quot;https://docs.shanyuhai.top/&quot;</span>
</code></pre></div><h2 id="detectdevicetype"><a href="#detectdevicetype" class="header-anchor">#</a> detectDeviceType</h2> <p><strong>FUNCTION：</strong></p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">const</span> <span class="token function-variable function">detectDeviceType</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span>
  <span class="token regex">/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i</span><span class="token punctuation">.</span><span class="token function">test</span><span class="token punctuation">(</span>navigator<span class="token punctuation">.</span>userAgent<span class="token punctuation">)</span>
    <span class="token operator">?</span> <span class="token string">'Mobile'</span>
    <span class="token operator">:</span> <span class="token string">'Desktop'</span><span class="token punctuation">;</span>
</code></pre></div><p><strong>CONCEPTS：</strong></p> <p>判断设备类型。</p> <p><strong>EXAMPLES：</strong></p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token function">detectDeviceType</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// &quot;Mobile&quot; or &quot;Desktop&quot;</span>
</code></pre></div><h2 id="elementcontains"><a href="#elementcontains" class="header-anchor">#</a> elementContains</h2> <p><strong>FUNCTION：</strong></p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">const</span> <span class="token function-variable function">elementContains</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token parameter">parent<span class="token punctuation">,</span> child</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> parent <span class="token operator">!==</span> child <span class="token operator">&amp;&amp;</span> parent<span class="token punctuation">.</span><span class="token function">contains</span><span class="token punctuation">(</span>child<span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre></div><p><strong>CONCEPTS：</strong></p> <p>DOM 包含关系。</p> <p><strong>EXAMPLES：</strong></p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token function">elementContains</span><span class="token punctuation">(</span>document<span class="token punctuation">.</span><span class="token function">querySelector</span><span class="token punctuation">(</span><span class="token string">'head'</span><span class="token punctuation">)</span><span class="token punctuation">,</span> document<span class="token punctuation">.</span><span class="token function">querySelector</span><span class="token punctuation">(</span><span class="token string">'title'</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// true</span>
<span class="token function">elementContains</span><span class="token punctuation">(</span>document<span class="token punctuation">.</span><span class="token function">querySelector</span><span class="token punctuation">(</span><span class="token string">'body'</span><span class="token punctuation">)</span><span class="token punctuation">,</span> document<span class="token punctuation">.</span><span class="token function">querySelector</span><span class="token punctuation">(</span><span class="token string">'body'</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// false</span>
</code></pre></div><h2 id="elementisvisibleinviewport"><a href="#elementisvisibleinviewport" class="header-anchor">#</a> elementIsVisibleInViewport</h2> <p><strong>FUNCTION：</strong></p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">const</span> <span class="token function-variable function">elementIsVisibleInViewport</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token parameter">el<span class="token punctuation">,</span> partiallyVisible <span class="token operator">=</span> <span class="token boolean">false</span></span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
  <span class="token keyword">const</span> <span class="token punctuation">{</span> top<span class="token punctuation">,</span> left<span class="token punctuation">,</span> bottom<span class="token punctuation">,</span> right <span class="token punctuation">}</span> <span class="token operator">=</span> el<span class="token punctuation">.</span><span class="token function">getBoundingClientRect</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token keyword">const</span> <span class="token punctuation">{</span> innerHeight<span class="token punctuation">,</span> innerWidth <span class="token punctuation">}</span> <span class="token operator">=</span> window<span class="token punctuation">;</span>
  <span class="token keyword">return</span> partiallyVisible
    <span class="token operator">?</span> <span class="token punctuation">(</span><span class="token punctuation">(</span>top <span class="token operator">&gt;</span> <span class="token number">0</span> <span class="token operator">&amp;&amp;</span> top <span class="token operator">&lt;</span> innerHeight<span class="token punctuation">)</span> <span class="token operator">||</span> <span class="token punctuation">(</span>bottom <span class="token operator">&gt;</span> <span class="token number">0</span> <span class="token operator">&amp;&amp;</span> bottom <span class="token operator">&lt;</span> innerHeight<span class="token punctuation">)</span><span class="token punctuation">)</span> <span class="token operator">&amp;&amp;</span>
        <span class="token punctuation">(</span><span class="token punctuation">(</span>left <span class="token operator">&gt;</span> <span class="token number">0</span> <span class="token operator">&amp;&amp;</span> left <span class="token operator">&lt;</span> innerWidth<span class="token punctuation">)</span> <span class="token operator">||</span> <span class="token punctuation">(</span>right <span class="token operator">&gt;</span> <span class="token number">0</span> <span class="token operator">&amp;&amp;</span> right <span class="token operator">&lt;</span> innerWidth<span class="token punctuation">)</span><span class="token punctuation">)</span>
    <span class="token operator">:</span> top <span class="token operator">&gt;=</span> <span class="token number">0</span> <span class="token operator">&amp;&amp;</span> left <span class="token operator">&gt;=</span> <span class="token number">0</span> <span class="token operator">&amp;&amp;</span> bottom <span class="token operator">&lt;=</span> innerHeight <span class="token operator">&amp;&amp;</span> right <span class="token operator">&lt;=</span> innerWidth<span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">;</span>
</code></pre></div><p><strong>CONCEPTS：</strong></p> <p>判断元素是否在视口中。</p> <p><strong>EXAMPLES：</strong></p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token comment">// e.g. 100x100 viewport and a 10x10px element at position {top: -1, left: 0, bottom: 9, right: 10}</span>
<span class="token function">elementIsVisibleInViewport</span><span class="token punctuation">(</span>el<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// false - (not fully visible)</span>
<span class="token function">elementIsVisibleInViewport</span><span class="token punctuation">(</span>el<span class="token punctuation">,</span> <span class="token boolean">true</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// true - (partially visible)</span>
</code></pre></div><h2 id="formtoobject"><a href="#formtoobject" class="header-anchor">#</a> formToObject</h2> <p><strong>FUNCTION：</strong></p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">const</span> <span class="token function-variable function">formToObject</span> <span class="token operator">=</span> <span class="token parameter">form</span> <span class="token operator">=&gt;</span>
  Array<span class="token punctuation">.</span><span class="token function">from</span><span class="token punctuation">(</span><span class="token keyword">new</span> <span class="token class-name">FormData</span><span class="token punctuation">(</span>form<span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">reduce</span><span class="token punctuation">(</span>
    <span class="token punctuation">(</span><span class="token parameter">acc<span class="token punctuation">,</span> <span class="token punctuation">[</span>key<span class="token punctuation">,</span> value<span class="token punctuation">]</span></span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">(</span><span class="token punctuation">{</span>
      <span class="token operator">...</span>acc<span class="token punctuation">,</span>
      <span class="token punctuation">[</span>key<span class="token punctuation">]</span><span class="token operator">:</span> value
    <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
    <span class="token punctuation">{</span><span class="token punctuation">}</span>
  <span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre></div><p><strong>CONCEPTS：</strong></p> <p>表单元素转为对象。</p> <p><strong>EXAMPLES：</strong></p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token function">formToObject</span><span class="token punctuation">(</span>document<span class="token punctuation">.</span><span class="token function">querySelector</span><span class="token punctuation">(</span><span class="token string">'#form'</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// { email: 'test@email.com', name: 'Test Name' }</span>
</code></pre></div><h2 id="getimages"><a href="#getimages" class="header-anchor">#</a> getImages</h2> <p><strong>FUNCTION：</strong></p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">const</span> <span class="token function-variable function">getImages</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token parameter">el<span class="token punctuation">,</span> includeDuplicates <span class="token operator">=</span> <span class="token boolean">false</span></span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
  <span class="token keyword">const</span> images <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token operator">...</span>el<span class="token punctuation">.</span><span class="token function">getElementsByTagName</span><span class="token punctuation">(</span><span class="token string">'img'</span><span class="token punctuation">)</span><span class="token punctuation">]</span><span class="token punctuation">.</span><span class="token function">map</span><span class="token punctuation">(</span><span class="token parameter">img</span> <span class="token operator">=&gt;</span> img<span class="token punctuation">.</span><span class="token function">getAttribute</span><span class="token punctuation">(</span><span class="token string">'src'</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token keyword">return</span> includeDuplicates <span class="token operator">?</span> images <span class="token operator">:</span> <span class="token punctuation">[</span><span class="token operator">...</span><span class="token keyword">new</span> <span class="token class-name">Set</span><span class="token punctuation">(</span>images<span class="token punctuation">)</span><span class="token punctuation">]</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">;</span>
</code></pre></div><p><strong>CONCEPTS：</strong></p> <p>获取某节点内的所有图片链接。</p> <p><strong>EXAMPLES：</strong></p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token function">getImages</span><span class="token punctuation">(</span>document<span class="token punctuation">,</span> <span class="token boolean">true</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// ['image1.jpg', 'image2.png', 'image1.png', '...']</span>
<span class="token function">getImages</span><span class="token punctuation">(</span>document<span class="token punctuation">,</span> <span class="token boolean">false</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// ['image1.jpg', 'image2.png', '...']</span>
</code></pre></div><h2 id="getscrollposition"><a href="#getscrollposition" class="header-anchor">#</a> getScrollPosition</h2> <p><strong>FUNCTION：</strong></p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">const</span> <span class="token function-variable function">getScrollPosition</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token parameter">el <span class="token operator">=</span> window</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">(</span><span class="token punctuation">{</span>
  x<span class="token operator">:</span> el<span class="token punctuation">.</span>pageXOffset <span class="token operator">!==</span> <span class="token keyword">undefined</span> <span class="token operator">?</span> el<span class="token punctuation">.</span>pageXOffset <span class="token operator">:</span> el<span class="token punctuation">.</span>scrollLeft<span class="token punctuation">,</span>
  y<span class="token operator">:</span> el<span class="token punctuation">.</span>pageYOffset <span class="token operator">!==</span> <span class="token keyword">undefined</span> <span class="token operator">?</span> el<span class="token punctuation">.</span>pageYOffset <span class="token operator">:</span> el<span class="token punctuation">.</span>scrollTop
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre></div><p><strong>CONCEPTS：</strong></p> <p>获取当前页面的滚动位置。</p> <p><strong>EXAMPLES：</strong></p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token function">getScrollPosition</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// {x: 0, y: 200}</span>
</code></pre></div><h2 id="getstyle-setstyle"><a href="#getstyle-setstyle" class="header-anchor">#</a> getStyle/setStyle</h2> <p><strong>FUNCTION：</strong></p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">const</span> <span class="token function-variable function">getStyle</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token parameter">el<span class="token punctuation">,</span> ruleName</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token function">getComputedStyle</span><span class="token punctuation">(</span>el<span class="token punctuation">)</span><span class="token punctuation">[</span>ruleName<span class="token punctuation">]</span><span class="token punctuation">;</span>
<span class="token keyword">const</span> <span class="token function-variable function">setStyle</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token parameter">el<span class="token punctuation">,</span> ruleName<span class="token punctuation">,</span> val</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">(</span>el<span class="token punctuation">.</span>style<span class="token punctuation">[</span>ruleName<span class="token punctuation">]</span> <span class="token operator">=</span> val<span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre></div><p><strong>CONCEPTS：</strong></p> <p>指定、设置元素样式。</p> <p><strong>EXAMPLES：</strong></p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token function">getStyle</span><span class="token punctuation">(</span>document<span class="token punctuation">.</span><span class="token function">querySelector</span><span class="token punctuation">(</span><span class="token string">'p'</span><span class="token punctuation">)</span><span class="token punctuation">,</span> <span class="token string">'font-size'</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// '16px'</span>
<span class="token function">setStyle</span><span class="token punctuation">(</span>document<span class="token punctuation">.</span><span class="token function">querySelector</span><span class="token punctuation">(</span><span class="token string">'p'</span><span class="token punctuation">)</span><span class="token punctuation">,</span> <span class="token string">'font-size'</span><span class="token punctuation">,</span> <span class="token string">'20px'</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// The first &lt;p&gt; element on the page will have a font-size of 20px</span>
</code></pre></div><h2 id="hasclass-toggleclass"><a href="#hasclass-toggleclass" class="header-anchor">#</a> hasClass/toggleClass</h2> <p><strong>FUNCTION：</strong></p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">const</span> <span class="token function-variable function">hasClass</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token parameter">el<span class="token punctuation">,</span> className</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> el<span class="token punctuation">.</span>classList<span class="token punctuation">.</span><span class="token function">contains</span><span class="token punctuation">(</span>className<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token keyword">const</span> <span class="token function-variable function">toggleClass</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token parameter">el<span class="token punctuation">,</span> className</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> el<span class="token punctuation">.</span>classList<span class="token punctuation">.</span><span class="token function">toggle</span><span class="token punctuation">(</span>className<span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre></div><p><strong>CONCEPTS：</strong></p> <p>判断、切换元素 class。</p> <p><strong>EXAMPLES：</strong></p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token function">hasClass</span><span class="token punctuation">(</span>document<span class="token punctuation">.</span><span class="token function">querySelector</span><span class="token punctuation">(</span><span class="token string">'p.special'</span><span class="token punctuation">)</span><span class="token punctuation">,</span> <span class="token string">'special'</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// true</span>
<span class="token function">toggleClass</span><span class="token punctuation">(</span>document<span class="token punctuation">.</span><span class="token function">querySelector</span><span class="token punctuation">(</span><span class="token string">'p.special'</span><span class="token punctuation">)</span><span class="token punctuation">,</span> <span class="token string">'special'</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// The paragraph will not have the 'special' class anymore</span>
</code></pre></div><h2 id="hide-show"><a href="#hide-show" class="header-anchor">#</a> hide/show</h2> <p><strong>FUNCTION：</strong></p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">const</span> <span class="token function-variable function">hide</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token parameter"><span class="token operator">...</span>el</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">[</span><span class="token operator">...</span>el<span class="token punctuation">]</span><span class="token punctuation">.</span><span class="token function">forEach</span><span class="token punctuation">(</span><span class="token parameter">e</span> <span class="token operator">=&gt;</span> <span class="token punctuation">(</span>e<span class="token punctuation">.</span>style<span class="token punctuation">.</span>display <span class="token operator">=</span> <span class="token string">'none'</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token keyword">const</span> <span class="token function-variable function">show</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token parameter"><span class="token operator">...</span>el</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">[</span><span class="token operator">...</span>el<span class="token punctuation">]</span><span class="token punctuation">.</span><span class="token function">forEach</span><span class="token punctuation">(</span><span class="token parameter">e</span> <span class="token operator">=&gt;</span> <span class="token punctuation">(</span>e<span class="token punctuation">.</span>style<span class="token punctuation">.</span>display <span class="token operator">=</span> <span class="token string">''</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre></div><p><strong>CONCEPTS：</strong></p> <p>隐藏、显示指定元素。</p> <p><strong>EXAMPLES：</strong></p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token function">hide</span><span class="token punctuation">(</span>document<span class="token punctuation">.</span><span class="token function">querySelectorAll</span><span class="token punctuation">(</span><span class="token string">'img'</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// Hides all &lt;img&gt; elements on the page</span>
<span class="token function">show</span><span class="token punctuation">(</span><span class="token operator">...</span>document<span class="token punctuation">.</span><span class="token function">querySelectorAll</span><span class="token punctuation">(</span><span class="token string">'img'</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// Shows all &lt;img&gt; elements on the page</span>
</code></pre></div><h2 id="httpsredirect"><a href="#httpsredirect" class="header-anchor">#</a> httpsRedirect</h2> <p><strong>FUNCTION：</strong></p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">const</span> <span class="token function-variable function">httpsRedirect</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
  <span class="token keyword">if</span> <span class="token punctuation">(</span>location<span class="token punctuation">.</span>protocol <span class="token operator">!==</span> <span class="token string">'https:'</span><span class="token punctuation">)</span> location<span class="token punctuation">.</span><span class="token function">replace</span><span class="token punctuation">(</span><span class="token string">'https://'</span> <span class="token operator">+</span> location<span class="token punctuation">.</span>href<span class="token punctuation">.</span><span class="token function">split</span><span class="token punctuation">(</span><span class="token string">'//'</span><span class="token punctuation">)</span><span class="token punctuation">[</span><span class="token number">1</span><span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">;</span>
</code></pre></div><p><strong>CONCEPTS：</strong></p> <p>重定向到 https。利用了 replace 方法导致无法返回。</p> <p><strong>EXAMPLES：</strong></p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token function">httpsRedirect</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// If you are on http://mydomain.com, you are redirected to https://mydomain.com</span>
</code></pre></div><h2 id="insertafter-insertbefore"><a href="#insertafter-insertbefore" class="header-anchor">#</a> insertAfter/insertBefore</h2> <p><strong>FUNCTION：</strong></p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">const</span> <span class="token function-variable function">insertAfter</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token parameter">el<span class="token punctuation">,</span> htmlString</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> el<span class="token punctuation">.</span><span class="token function">insertAdjacentHTML</span><span class="token punctuation">(</span><span class="token string">'afterend'</span><span class="token punctuation">,</span> htmlString<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token keyword">const</span> <span class="token function-variable function">insertBefore</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token parameter">el<span class="token punctuation">,</span> htmlString</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> el<span class="token punctuation">.</span><span class="token function">insertAdjacentHTML</span><span class="token punctuation">(</span><span class="token string">'beforebegin'</span><span class="token punctuation">,</span> htmlString<span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre></div><p><strong>CONCEPTS：</strong></p> <p>插入 HTML 片段。</p> <p><strong>EXAMPLES：</strong></p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token function">insertAfter</span><span class="token punctuation">(</span>document<span class="token punctuation">.</span><span class="token function">getElementById</span><span class="token punctuation">(</span><span class="token string">'myId'</span><span class="token punctuation">)</span><span class="token punctuation">,</span> <span class="token string">'&lt;p&gt;after&lt;/p&gt;'</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// &lt;div id=&quot;myId&quot;&gt;...&lt;/div&gt; &lt;p&gt;after&lt;/p&gt;</span>
<span class="token function">insertBefore</span><span class="token punctuation">(</span>document<span class="token punctuation">.</span><span class="token function">getElementById</span><span class="token punctuation">(</span><span class="token string">'myId'</span><span class="token punctuation">)</span><span class="token punctuation">,</span> <span class="token string">'&lt;p&gt;before&lt;/p&gt;'</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// &lt;p&gt;before&lt;/p&gt; &lt;div id=&quot;myId&quot;&gt;...&lt;/div&gt;</span>
</code></pre></div><h2 id="isbrowsertabfocused"><a href="#isbrowsertabfocused" class="header-anchor">#</a> isBrowserTabFocused</h2> <p><strong>FUNCTION：</strong></p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">const</span> <span class="token function-variable function">isBrowserTabFocused</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token operator">!</span>document<span class="token punctuation">.</span>hidden<span class="token punctuation">;</span>
</code></pre></div><p><strong>CONCEPTS：</strong></p> <p>当前标签页是否处于 actived 状态。可以利用标签页切换事件和 title 做一点有意思的事情。</p> <p><strong>EXAMPLES：</strong></p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token function">isBrowserTabFocused</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// true</span>
</code></pre></div><h2 id="nodelisttoarray"><a href="#nodelisttoarray" class="header-anchor">#</a> nodeListToArray</h2> <p><strong>FUNCTION：</strong></p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">const</span> <span class="token function-variable function">nodeListToArray</span> <span class="token operator">=</span> <span class="token parameter">nodeList</span> <span class="token operator">=&gt;</span> <span class="token punctuation">[</span><span class="token operator">...</span>nodeList<span class="token punctuation">]</span><span class="token punctuation">;</span>
</code></pre></div><p><strong>CONCEPTS：</strong></p> <p>node 列表转为数组。</p> <p><strong>EXAMPLES：</strong></p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token function">nodeListToArray</span><span class="token punctuation">(</span>document<span class="token punctuation">.</span>childNodes<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// [ &lt;!DOCTYPE html&gt;, html ]</span>
</code></pre></div><h2 id="observemutations"><a href="#observemutations" class="header-anchor">#</a> observeMutations</h2> <p><strong>FUNCTION：</strong></p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">const</span> <span class="token function-variable function">observeMutations</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token parameter">element<span class="token punctuation">,</span> callback<span class="token punctuation">,</span> options</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
  <span class="token keyword">const</span> observer <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">MutationObserver</span><span class="token punctuation">(</span><span class="token parameter">mutations</span> <span class="token operator">=&gt;</span> mutations<span class="token punctuation">.</span><span class="token function">forEach</span><span class="token punctuation">(</span><span class="token parameter">m</span> <span class="token operator">=&gt;</span> <span class="token function">callback</span><span class="token punctuation">(</span>m<span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
  observer<span class="token punctuation">.</span><span class="token function">observe</span><span class="token punctuation">(</span>
    element<span class="token punctuation">,</span>
    Object<span class="token punctuation">.</span><span class="token function">assign</span><span class="token punctuation">(</span>
      <span class="token punctuation">{</span>
        childList<span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>
        attributes<span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>
        attributeOldValue<span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>
        characterData<span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>
        characterDataOldValue<span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>
        subtree<span class="token operator">:</span> <span class="token boolean">true</span>
      <span class="token punctuation">}</span><span class="token punctuation">,</span>
      options
    <span class="token punctuation">)</span>
  <span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token keyword">return</span> observer<span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">;</span>
</code></pre></div><p><strong>CONCEPTS：</strong></p> <p>尚不能理解使用场景。</p> <p><strong>EXAMPLES：</strong></p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">const</span> obs <span class="token operator">=</span> <span class="token function">observeMutations</span><span class="token punctuation">(</span>document<span class="token punctuation">,</span> console<span class="token punctuation">.</span>log<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// Logs all mutations that happen on the page</span>
obs<span class="token punctuation">.</span><span class="token function">disconnect</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// Disconnects the observer and stops logging mutations on the page</span>
</code></pre></div><h2 id="off-on"><a href="#off-on" class="header-anchor">#</a> off/on</h2> <p><strong>FUNCTION：</strong></p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">const</span> <span class="token function-variable function">off</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token parameter">el<span class="token punctuation">,</span> evt<span class="token punctuation">,</span> fn<span class="token punctuation">,</span> opts <span class="token operator">=</span> <span class="token boolean">false</span></span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> el<span class="token punctuation">.</span><span class="token function">removeEventListener</span><span class="token punctuation">(</span>evt<span class="token punctuation">,</span> fn<span class="token punctuation">,</span> opts<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token keyword">const</span> <span class="token function-variable function">on</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token parameter">el<span class="token punctuation">,</span> evt<span class="token punctuation">,</span> fn<span class="token punctuation">,</span> opts <span class="token operator">=</span> <span class="token punctuation">{</span><span class="token punctuation">}</span></span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
  <span class="token keyword">const</span> <span class="token function-variable function">delegatorFn</span> <span class="token operator">=</span> <span class="token parameter">e</span> <span class="token operator">=&gt;</span> e<span class="token punctuation">.</span>target<span class="token punctuation">.</span><span class="token function">matches</span><span class="token punctuation">(</span>opts<span class="token punctuation">.</span>target<span class="token punctuation">)</span> <span class="token operator">&amp;&amp;</span> <span class="token function">fn</span><span class="token punctuation">.</span><span class="token function">call</span><span class="token punctuation">(</span>e<span class="token punctuation">.</span>target<span class="token punctuation">,</span> e<span class="token punctuation">)</span><span class="token punctuation">;</span>
  el<span class="token punctuation">.</span><span class="token function">addEventListener</span><span class="token punctuation">(</span>evt<span class="token punctuation">,</span> opts<span class="token punctuation">.</span>target <span class="token operator">?</span> delegatorFn <span class="token operator">:</span> fn<span class="token punctuation">,</span> opts<span class="token punctuation">.</span>options <span class="token operator">||</span> <span class="token boolean">false</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token keyword">if</span> <span class="token punctuation">(</span>opts<span class="token punctuation">.</span>target<span class="token punctuation">)</span> <span class="token keyword">return</span> delegatorFn<span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">;</span>
</code></pre></div><p><strong>CONCEPTS：</strong></p> <p>移除、添加事件监听。</p> <p><strong>EXAMPLES：</strong></p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">const</span> <span class="token function-variable function">fn</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">'!'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
document<span class="token punctuation">.</span>body<span class="token punctuation">.</span><span class="token function">addEventListener</span><span class="token punctuation">(</span><span class="token string">'click'</span><span class="token punctuation">,</span> fn<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token function">off</span><span class="token punctuation">(</span>document<span class="token punctuation">.</span>body<span class="token punctuation">,</span> <span class="token string">'click'</span><span class="token punctuation">,</span> fn<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// no longer logs '!' upon clicking on the page</span>
<span class="token keyword">const</span> <span class="token function-variable function">fn</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">'!'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token function">on</span><span class="token punctuation">(</span>document<span class="token punctuation">.</span>body<span class="token punctuation">,</span> <span class="token string">'click'</span><span class="token punctuation">,</span> fn<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// logs '!' upon clicking the body</span>
<span class="token function">on</span><span class="token punctuation">(</span>document<span class="token punctuation">.</span>body<span class="token punctuation">,</span> <span class="token string">'click'</span><span class="token punctuation">,</span> fn<span class="token punctuation">,</span> <span class="token punctuation">{</span> target<span class="token operator">:</span> <span class="token string">'p'</span> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// logs '!' upon clicking a `p` element child of the body</span>
<span class="token function">on</span><span class="token punctuation">(</span>document<span class="token punctuation">.</span>body<span class="token punctuation">,</span> <span class="token string">'click'</span><span class="token punctuation">,</span> fn<span class="token punctuation">,</span> <span class="token punctuation">{</span> options<span class="token operator">:</span> <span class="token boolean">true</span> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// use capturing instead of bubbling</span>
</code></pre></div><h2 id="onuserinputchange"><a href="#onuserinputchange" class="header-anchor">#</a> onUserInputChange</h2> <p><strong>FUNCTION：</strong></p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">const</span> <span class="token function-variable function">onUserInputChange</span> <span class="token operator">=</span> <span class="token parameter">callback</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
  <span class="token keyword">let</span> type <span class="token operator">=</span> <span class="token string">'mouse'</span><span class="token punctuation">,</span>
    lastTime <span class="token operator">=</span> <span class="token number">0</span><span class="token punctuation">;</span>
  <span class="token keyword">const</span> <span class="token function-variable function">mousemoveHandler</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
    <span class="token keyword">const</span> now <span class="token operator">=</span> performance<span class="token punctuation">.</span><span class="token function">now</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token keyword">if</span> <span class="token punctuation">(</span>now <span class="token operator">-</span> lastTime <span class="token operator">&lt;</span> <span class="token number">20</span><span class="token punctuation">)</span>
      <span class="token punctuation">(</span>type <span class="token operator">=</span> <span class="token string">'mouse'</span><span class="token punctuation">)</span><span class="token punctuation">,</span> <span class="token function">callback</span><span class="token punctuation">(</span>type<span class="token punctuation">)</span><span class="token punctuation">,</span> document<span class="token punctuation">.</span><span class="token function">removeEventListener</span><span class="token punctuation">(</span><span class="token string">'mousemove'</span><span class="token punctuation">,</span> mousemoveHandler<span class="token punctuation">)</span><span class="token punctuation">;</span>
    lastTime <span class="token operator">=</span> now<span class="token punctuation">;</span>
  <span class="token punctuation">}</span><span class="token punctuation">;</span>
  document<span class="token punctuation">.</span><span class="token function">addEventListener</span><span class="token punctuation">(</span><span class="token string">'touchstart'</span><span class="token punctuation">,</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
    <span class="token keyword">if</span> <span class="token punctuation">(</span>type <span class="token operator">===</span> <span class="token string">'touch'</span><span class="token punctuation">)</span> <span class="token keyword">return</span><span class="token punctuation">;</span>
    <span class="token punctuation">(</span>type <span class="token operator">=</span> <span class="token string">'touch'</span><span class="token punctuation">)</span><span class="token punctuation">,</span> <span class="token function">callback</span><span class="token punctuation">(</span>type<span class="token punctuation">)</span><span class="token punctuation">,</span> document<span class="token punctuation">.</span><span class="token function">addEventListener</span><span class="token punctuation">(</span><span class="token string">'mousemove'</span><span class="token punctuation">,</span> mousemoveHandler<span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">;</span>
</code></pre></div><p><strong>CONCEPTS：</strong></p> <p>监听用户输入类型为 mouse 还是 touch。</p> <p><strong>EXAMPLES：</strong></p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token function">onUserInputChange</span><span class="token punctuation">(</span><span class="token parameter">type</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
  console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">'The user is now using'</span><span class="token punctuation">,</span> type<span class="token punctuation">,</span> <span class="token string">'as an input method.'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre></div><h2 id="prefix"><a href="#prefix" class="header-anchor">#</a> prefix</h2> <p><strong>FUNCTION：</strong></p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">const</span> <span class="token function-variable function">prefix</span> <span class="token operator">=</span> <span class="token parameter">prop</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
  <span class="token keyword">const</span> capitalizedProp <span class="token operator">=</span> prop<span class="token punctuation">.</span><span class="token function">charAt</span><span class="token punctuation">(</span><span class="token number">0</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">toUpperCase</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">+</span> prop<span class="token punctuation">.</span><span class="token function">slice</span><span class="token punctuation">(</span><span class="token number">1</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token keyword">const</span> prefixes <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token string">''</span><span class="token punctuation">,</span> <span class="token string">'webkit'</span><span class="token punctuation">,</span> <span class="token string">'moz'</span><span class="token punctuation">,</span> <span class="token string">'ms'</span><span class="token punctuation">,</span> <span class="token string">'o'</span><span class="token punctuation">]</span><span class="token punctuation">;</span>
  <span class="token keyword">const</span> i <span class="token operator">=</span> prefixes<span class="token punctuation">.</span><span class="token function">findIndex</span><span class="token punctuation">(</span>
    <span class="token parameter">prefix</span> <span class="token operator">=&gt;</span> <span class="token keyword">typeof</span> document<span class="token punctuation">.</span>body<span class="token punctuation">.</span>style<span class="token punctuation">[</span>prefix <span class="token operator">?</span> prefix <span class="token operator">+</span> capitalizedProp <span class="token operator">:</span> prop<span class="token punctuation">]</span> <span class="token operator">!==</span> <span class="token string">'undefined'</span>
  <span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token keyword">return</span> i <span class="token operator">!==</span> <span class="token operator">-</span><span class="token number">1</span> <span class="token operator">?</span> <span class="token punctuation">(</span>i <span class="token operator">===</span> <span class="token number">0</span> <span class="token operator">?</span> prop <span class="token operator">:</span> prefixes<span class="token punctuation">[</span>i<span class="token punctuation">]</span> <span class="token operator">+</span> capitalizedProp<span class="token punctuation">)</span> <span class="token operator">:</span> <span class="token keyword">null</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">;</span>
</code></pre></div><p><strong>CONCEPTS：</strong></p> <p>补充浏览器前缀。</p> <p><strong>EXAMPLES：</strong></p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token function">prefix</span><span class="token punctuation">(</span><span class="token string">'appearance'</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// 'appearance' on a supported browser, otherwise 'webkitAppearance', 'mozAppearance', 'msAppearance' or 'oAppearance'</span>
</code></pre></div><h2 id="recordanimationframes"><a href="#recordanimationframes" class="header-anchor">#</a> recordAnimationFrames</h2> <p><strong>FUNCTION：</strong></p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">const</span> <span class="token function-variable function">recordAnimationFrames</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token parameter">callback<span class="token punctuation">,</span> autoStart <span class="token operator">=</span> <span class="token boolean">true</span></span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
  <span class="token keyword">let</span> running <span class="token operator">=</span> <span class="token boolean">true</span><span class="token punctuation">,</span>
    raf<span class="token punctuation">;</span>
  <span class="token keyword">const</span> <span class="token function-variable function">stop</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
    running <span class="token operator">=</span> <span class="token boolean">false</span><span class="token punctuation">;</span>
    <span class="token function">cancelAnimationFrame</span><span class="token punctuation">(</span>raf<span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token punctuation">}</span><span class="token punctuation">;</span>
  <span class="token keyword">const</span> <span class="token function-variable function">start</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
    running <span class="token operator">=</span> <span class="token boolean">true</span><span class="token punctuation">;</span>
    <span class="token function">run</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token punctuation">}</span><span class="token punctuation">;</span>
  <span class="token keyword">const</span> <span class="token function-variable function">run</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
    raf <span class="token operator">=</span> <span class="token function">requestAnimationFrame</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
      <span class="token function">callback</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
      <span class="token keyword">if</span> <span class="token punctuation">(</span>running<span class="token punctuation">)</span> <span class="token function">run</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token punctuation">}</span><span class="token punctuation">;</span>
  <span class="token keyword">if</span> <span class="token punctuation">(</span>autoStart<span class="token punctuation">)</span> <span class="token function">start</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token keyword">return</span> <span class="token punctuation">{</span> start<span class="token punctuation">,</span> stop <span class="token punctuation">}</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">;</span>
</code></pre></div><p><strong>CONCEPTS：</strong></p> <p>记录动画状态。</p> <p><strong>EXAMPLES：</strong></p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">const</span> <span class="token function-variable function">cb</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">'Animation frame fired'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token keyword">const</span> recorder <span class="token operator">=</span> <span class="token function">recordAnimationFrames</span><span class="token punctuation">(</span>cb<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// logs 'Animation frame fired' on each animation frame</span>
recorder<span class="token punctuation">.</span><span class="token function">stop</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// stops logging</span>
recorder<span class="token punctuation">.</span><span class="token function">start</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// starts again</span>
<span class="token keyword">const</span> recorder2 <span class="token operator">=</span> <span class="token function">recordAnimationFrames</span><span class="token punctuation">(</span>cb<span class="token punctuation">,</span> <span class="token boolean">false</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// `start` needs to be explicitly called to begin recording frames</span>
</code></pre></div><h2 id="redirect"><a href="#redirect" class="header-anchor">#</a> redirect</h2> <p><strong>FUNCTION：</strong></p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">const</span> <span class="token function-variable function">redirect</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token parameter">url<span class="token punctuation">,</span> asLink <span class="token operator">=</span> <span class="token boolean">true</span></span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span>
  asLink <span class="token operator">?</span> <span class="token punctuation">(</span>window<span class="token punctuation">.</span>location<span class="token punctuation">.</span>href <span class="token operator">=</span> url<span class="token punctuation">)</span> <span class="token operator">:</span> window<span class="token punctuation">.</span>location<span class="token punctuation">.</span><span class="token function">replace</span><span class="token punctuation">(</span>url<span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre></div><p><strong>CONCEPTS：</strong></p> <p>重定向。</p> <p><strong>EXAMPLES：</strong></p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token function">redirect</span><span class="token punctuation">(</span><span class="token string">'https://google.com'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre></div><h2 id="runasync"><a href="#runasync" class="header-anchor">#</a> runAsync</h2> <p><strong>FUNCTION：</strong></p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">const</span> <span class="token function-variable function">runAsync</span> <span class="token operator">=</span> <span class="token parameter">fn</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
  <span class="token keyword">const</span> worker <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Worker</span><span class="token punctuation">(</span>
    <span class="token constant">URL</span><span class="token punctuation">.</span><span class="token function">createObjectURL</span><span class="token punctuation">(</span><span class="token keyword">new</span> <span class="token class-name">Blob</span><span class="token punctuation">(</span><span class="token punctuation">[</span><span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string">postMessage((</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>fn<span class="token interpolation-punctuation punctuation">}</span></span><span class="token string">)());</span><span class="token template-punctuation string">`</span></span><span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">,</span> <span class="token punctuation">{</span>
      type<span class="token operator">:</span> <span class="token string">'application/javascript; charset=utf-8'</span>
    <span class="token punctuation">}</span><span class="token punctuation">)</span>
  <span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token keyword">return</span> <span class="token keyword">new</span> <span class="token class-name">Promise</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token parameter">res<span class="token punctuation">,</span> rej</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
    worker<span class="token punctuation">.</span><span class="token function-variable function">onmessage</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token parameter"><span class="token punctuation">{</span> data <span class="token punctuation">}</span></span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
      <span class="token function">res</span><span class="token punctuation">(</span>data<span class="token punctuation">)</span><span class="token punctuation">,</span> worker<span class="token punctuation">.</span><span class="token function">terminate</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token punctuation">}</span><span class="token punctuation">;</span>
    worker<span class="token punctuation">.</span><span class="token function-variable function">onerror</span> <span class="token operator">=</span> <span class="token parameter">err</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
      <span class="token function">rej</span><span class="token punctuation">(</span>err<span class="token punctuation">)</span><span class="token punctuation">,</span> worker<span class="token punctuation">.</span><span class="token function">terminate</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token punctuation">}</span><span class="token punctuation">;</span>
  <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">;</span>
</code></pre></div><p><strong>CONCEPTS：</strong></p> <p>使用 web worker 进程。尚不能理解具体使用。</p> <p><strong>EXAMPLES：</strong></p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">const</span> <span class="token function-variable function">longRunningFunction</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
  <span class="token keyword">let</span> result <span class="token operator">=</span> <span class="token number">0</span><span class="token punctuation">;</span>
  <span class="token keyword">for</span> <span class="token punctuation">(</span><span class="token keyword">let</span> i <span class="token operator">=</span> <span class="token number">0</span><span class="token punctuation">;</span> i <span class="token operator">&lt;</span> <span class="token number">1000</span><span class="token punctuation">;</span> i<span class="token operator">++</span><span class="token punctuation">)</span>
    <span class="token keyword">for</span> <span class="token punctuation">(</span><span class="token keyword">let</span> j <span class="token operator">=</span> <span class="token number">0</span><span class="token punctuation">;</span> j <span class="token operator">&lt;</span> <span class="token number">700</span><span class="token punctuation">;</span> j<span class="token operator">++</span><span class="token punctuation">)</span> <span class="token keyword">for</span> <span class="token punctuation">(</span><span class="token keyword">let</span> k <span class="token operator">=</span> <span class="token number">0</span><span class="token punctuation">;</span> k <span class="token operator">&lt;</span> <span class="token number">300</span><span class="token punctuation">;</span> k<span class="token operator">++</span><span class="token punctuation">)</span> result <span class="token operator">=</span> result <span class="token operator">+</span> i <span class="token operator">+</span> j <span class="token operator">+</span> k<span class="token punctuation">;</span>

  <span class="token keyword">return</span> result<span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">;</span>
<span class="token comment">/*
  NOTE: Since the function is running in a different context, closures are not supported.
  The function supplied to `runAsync` gets stringified, so everything becomes literal.
  All variables and functions must be defined inside.
*/</span>
<span class="token function">runAsync</span><span class="token punctuation">(</span>longRunningFunction<span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">then</span><span class="token punctuation">(</span>console<span class="token punctuation">.</span>log<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// 209685000000</span>
<span class="token function">runAsync</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token number">10</span> <span class="token operator">**</span> <span class="token number">3</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">then</span><span class="token punctuation">(</span>console<span class="token punctuation">.</span>log<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// 1000</span>
<span class="token keyword">let</span> outsideVariable <span class="token operator">=</span> <span class="token number">50</span><span class="token punctuation">;</span>
<span class="token function">runAsync</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token keyword">typeof</span> outsideVariable<span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">then</span><span class="token punctuation">(</span>console<span class="token punctuation">.</span>log<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// 'undefined'</span>
</code></pre></div><h2 id="scrolltotop"><a href="#scrolltotop" class="header-anchor">#</a> scrollToTop</h2> <p><strong>FUNCTION：</strong></p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">const</span> <span class="token function-variable function">scrollToTop</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
  <span class="token keyword">const</span> c <span class="token operator">=</span> document<span class="token punctuation">.</span>documentElement<span class="token punctuation">.</span>scrollTop <span class="token operator">||</span> document<span class="token punctuation">.</span>body<span class="token punctuation">.</span>scrollTop<span class="token punctuation">;</span>
  <span class="token keyword">if</span> <span class="token punctuation">(</span>c <span class="token operator">&gt;</span> <span class="token number">0</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    window<span class="token punctuation">.</span><span class="token function">requestAnimationFrame</span><span class="token punctuation">(</span>scrollToTop<span class="token punctuation">)</span><span class="token punctuation">;</span>
    window<span class="token punctuation">.</span><span class="token function">scrollTo</span><span class="token punctuation">(</span><span class="token number">0</span><span class="token punctuation">,</span> c <span class="token operator">-</span> c <span class="token operator">/</span> <span class="token number">8</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token punctuation">}</span>
<span class="token punctuation">}</span><span class="token punctuation">;</span>
</code></pre></div><p><strong>CONCEPTS：</strong></p> <p>回到顶部。</p> <p><strong>EXAMPLES：</strong></p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token function">scrollToTop</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre></div><h2 id="smoothscroll"><a href="#smoothscroll" class="header-anchor">#</a> smoothScroll</h2> <p><strong>FUNCTION：</strong></p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">const</span> <span class="token function-variable function">smoothScroll</span> <span class="token operator">=</span> <span class="token parameter">element</span> <span class="token operator">=&gt;</span>
  document<span class="token punctuation">.</span><span class="token function">querySelector</span><span class="token punctuation">(</span>element<span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">scrollIntoView</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
    behavior<span class="token operator">:</span> <span class="token string">'smooth'</span>
  <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre></div><p><strong>CONCEPTS：</strong></p> <p>平滑滚动至某位置。锚点效果。</p> <p><strong>EXAMPLES：</strong></p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token function">smoothScroll</span><span class="token punctuation">(</span><span class="token string">'#fooBar'</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// scrolls smoothly to the element with the id fooBar</span>
<span class="token function">smoothScroll</span><span class="token punctuation">(</span><span class="token string">'.fooBar'</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// scrolls smoothly to the first element with a class of fooBar</span>
</code></pre></div><h2 id="serializeform"><a href="#serializeform" class="header-anchor">#</a> serializeForm</h2> <p><strong>FUNCTION：</strong></p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">const</span> <span class="token function-variable function">serializeForm</span> <span class="token operator">=</span> <span class="token parameter">form</span> <span class="token operator">=&gt;</span>
  Array<span class="token punctuation">.</span><span class="token function">from</span><span class="token punctuation">(</span><span class="token keyword">new</span> <span class="token class-name">FormData</span><span class="token punctuation">(</span>form<span class="token punctuation">)</span><span class="token punctuation">,</span> <span class="token parameter">field</span> <span class="token operator">=&gt;</span> field<span class="token punctuation">.</span><span class="token function">map</span><span class="token punctuation">(</span>encodeURIComponent<span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">join</span><span class="token punctuation">(</span><span class="token string">'='</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">join</span><span class="token punctuation">(</span><span class="token string">'&amp;'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre></div><p><strong>CONCEPTS：</strong></p> <p>序列化表单。</p> <p><strong>EXAMPLES：</strong></p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token function">serializeForm</span><span class="token punctuation">(</span>document<span class="token punctuation">.</span><span class="token function">querySelector</span><span class="token punctuation">(</span><span class="token string">'#form'</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// email=test%40email.com&amp;name=Test%20Name</span>
</code></pre></div><h2 id="triggerevent"><a href="#triggerevent" class="header-anchor">#</a> triggerEvent</h2> <p><strong>FUNCTION：</strong></p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">const</span> <span class="token function-variable function">triggerEvent</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token parameter">el<span class="token punctuation">,</span> eventType<span class="token punctuation">,</span> detail</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span>
  el<span class="token punctuation">.</span><span class="token function">dispatchEvent</span><span class="token punctuation">(</span><span class="token keyword">new</span> <span class="token class-name">CustomEvent</span><span class="token punctuation">(</span>eventType<span class="token punctuation">,</span> <span class="token punctuation">{</span> detail <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre></div><p><strong>CONCEPTS：</strong></p> <p>事件上绑定自定义数据。</p> <p><strong>EXAMPLES：</strong></p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token function">triggerEvent</span><span class="token punctuation">(</span>document<span class="token punctuation">.</span><span class="token function">getElementById</span><span class="token punctuation">(</span><span class="token string">'myId'</span><span class="token punctuation">)</span><span class="token punctuation">,</span> <span class="token string">'click'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token function">triggerEvent</span><span class="token punctuation">(</span>document<span class="token punctuation">.</span><span class="token function">getElementById</span><span class="token punctuation">(</span><span class="token string">'myId'</span><span class="token punctuation">)</span><span class="token punctuation">,</span> <span class="token string">'click'</span><span class="token punctuation">,</span> <span class="token punctuation">{</span> username<span class="token operator">:</span> <span class="token string">'bob'</span> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre></div></div> <footer class="page-edit"><!----> <div class="last-updated"><span class="prefix">上次更新:</span> <span class="time">2020年3月17日星期二下午2点47分</span></div></footer> <div class="page-nav"><p class="inner"><span class="prev">
      ←
      <a href="/frontend/utils/code-array.html" class="prev">
        30s code array
      </a></span> <span class="next"><a href="/frontend/utils/code-date.html">
        30s code date
      </a>
      →
    </span></p></div> </main></div><div class="global-ui"><!----><!----></div></div>
    <script src="/assets/js/app.1f0f93c9.js" defer></script><script src="/assets/js/2.f28f3227.js" defer></script><script src="/assets/js/63.c75dcb25.js" defer></script><script src="/assets/js/4.494c614b.js" defer></script><script src="/assets/js/3.a7eaa85f.js" defer></script>
  </body>
</html>
